<template>
	<section :class="cname">
		<swiper :options="options" :not-next-tick="options.notNextTick">
			<swiper-slide v-for="item in items" :key="item.image">
				<router-link 
					:to="{path:item.link?item.link:''}">
					<div v-if="item.title" class="mark">
						<span v-text="item.title"></span>
					</div>
					<img :src="item.image" alt="image"/>
				</router-link>
			</swiper-slide>
			<div v-if="items&&options.pagination" class="swiper-pagination" slot="pagination"></div>
		</swiper>
	</section>
</template>

<script>
import {swiper, swiperSlide} from 'vue-awesome-swiper'
export default {
	components:{
		swiper,
		swiperSlide
	},
	props: {
		cname:{
			type: String,
			default: ''
		},
		options: {
			type: Object,
			default() {
				return {
					autoplay: {
						delay: 5000,
						disableOnInteraction:false,
						loop: true,
					},
					initialSlide: 0,
					grabCursor: true,
					slidesPerView: 1,
					setWrapperSize: true,
					autoHeight: false,
					paginationClickable: true,
					mousewheelControl: true,
					observeParents: true,
					pagination: {
						el: '.swiper-pagination',
						clickable :true
					},
					lazy: {
				    loadPrevNext: true,
				    loadPrevNextAmount: 2,
				  },
				}
			}
		},
		items: {
			type: Array,
			default() {
				return []
			}
		}
	}
}
</script>
<style lang="css">
@import "~swiper/dist/css/swiper.css";
.swiper-wrapper {
	img[lazy=loaded] {
    width: 100%;
		height: 100%;
  }
}

</style>